<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document123456</title>
    <link rel="stylesheet" type="text/less" href="./less/index.less">
    <script src="./js/less.js"></script>
    <!-- 使用 Live Server 打开页面 -->
    <!-- 测试注释1 -->
    <!-- 测试注释2 -->
</head>

<body>
    <!-- 头部区域 -->
    <div class="header">

        <div class="header_top">
            <div class="header_top_center clearFix w">
                <div class="header_top_center_left">
                    <a href="#">DJI 大疆官网</a>
                    <div>
                        <ul>
                            <!-- <li>下单即享 1% DJI币返点</li> -->
                        </ul>
                    </div>
                </div>
                <div class="header_top_center_right">
                    <ul>
                        <li class="iconfont"><a href="#">购物车</a></li>
                        <li><a href="#">登陆</a></li>
                        <li><a href="#">注册</a></li>
                        <li><a href="#">中国大陆(简体中文/￥CNY)</a></li>
                    </ul>
                </div>
            </div>
        </div>

        <div class="header_content">
            <div class="header_content_center clearFix w">
                <div class="header_content_center_left">
                    <div class="iconfont">
                        <span class="iconfont">&#xe6f7;</span>
                        <i>商城</i>
                    </div>
                    <ul>
                        <li class="iconfont">商品分类</li>
                        <li><a href="#">以旧换新</a></li>
                        <li><a href="#">购机指南</a></li>
                        <li><a href="#">DJI 大疆商城 APP</a></li>
                    </ul>
                </div>
                <div class="header_content_center_right">
                    <form action="">
                        <input type="text" placeholder="搜索商品...">
                        <button class="iconfont">&#xe67d;</button>
                    </form>
                </div>
            </div>
        </div>

        <div class="header_bottom w">
            <ul>
                <!-- <li>
                    <a href="#">
                        <img src="https://stormsend1.djicdn.com/stormsend/uploads/48c26180-9980-0136-3e40-12528100fbe3/mavic2.svg"
                            alt="">
                        <div>御 Mavic</div>
                    </a>
                </li> -->
                
            </ul>
        </div>

    </div>

    <!-- 轮播图区域 -->
    <div class="swiper">
        <ul>
            <!-- <li>
                <a href="#">
                    <img src="./imgs/banner1.jpg" alt="">
                </a>
            </li> -->
        </ul>
        <div class="w">
            <a class="previous" href="##">
                <span class="iconfont">
                    &#xe731;
                </span>
            </a>
            <a class="next" href="##">
                <span class="iconfont">
                    &#xe731;
                </span>
            </a>
        </div>
        <ul>
            <!-- <li>1</li>
            <li>2</li>
            <li>3</li> -->
        </ul>
    </div>

    <!-- content区域 -->
    <div class="content">

        <div class="content_wrap w">

            <div class="content_top">

                <div class="content_top_top">
                    <ul>
                        <!-- <li>
                            <a href="#">
                                <div class="item_top">
                                    <img class="item_top_a"
                                        src="https://stormsend1.djicdn.com/stormsend/uploads/c30bc5b68080a110eb41b5fffd97c1b8.jpg"
                                        alt="">
                                    <img class="item_top_b"
                                        src="https://stormsend1.djicdn.com/stormsend/uploads/bb3757c035de90f760ca73b8c69cd663.png"
                                        alt="">
                                    <img class="item_top_c"
                                        src="https://stormsend1.djicdn.com/stormsend/uploads/fc362c9d41c6db8fbc08e31f5431b81b.png"
                                        alt="">
                                </div>
                                <div class="item_bottom">
                                    <h2>DJI FPV 套装</h2>
                                    <p class="item_bottom_a">沉浸式飞行体验 · 4K/60fps超广角拍摄 · 全新运动模式</p>
                                    <p class="item_bottom_b">DJI FPV，
                                        将飞行想象变成现实，全新沉浸式驾控让你化身飞行员，像驾车般流畅自如地驾驭飞行，轻而易举实现心中所想，见所未见。</p>
                                    <p class="item_bottom_c">
                                        ￥ 7999
                                    </p>
                                </div>
                            </a>
                        </li> -->
                        
                    </ul>
                </div>

                <div class="content_top_bottom clearFix">

                    <a href="#" class="content_top_bottom_left">
                        <p>
                            DJI Care 随心续享<br>
                            商城专属，双重保障
                        </p>
                    </a>
                    <a href="#" class="content_top_bottom_right">
                        <p>
                            DJI Care 随心续享<br>
                            商城专属，双重保障
                        </p>
                    </a>

                </div>

            </div>

            <div class="content_bottom">

                <div class="content_bottom_header clearFix">
                    <h2>御 Mavic</h2>
                    <a href="#">更多></a>
                </div>

                <div class="content_bottom_top clearFix">

                    <!-- <div class="content_bottom_top_left">
                        <a href="#">
                            <img src="https://stormsend1.djicdn.com/stormsend/uploads/bb3757c035de90f760ca73b8c69cd663.png"
                                alt="">
                            <span>
                                <h2>DJI MINI 2</h2>
                                <p class="content_bottom_top_left_a">
                                    小巧但性能犀利，可拍摄4K视频，实现4倍变焦，最远10公里控制距离。一键短片、一键全景，一键直出大片。智能易用，航拍轻而易举。
                                </p>
                                <p class="content_bottom_top_left_b">
                                    ￥2899
                                </p>
                            </span>
                        </a>
                    </div>
                    
                    <div class="content_bottom_top_right">
                        <video loop autoplay muted
                            src="https://stormsend1.djicdn.com/stormsend/uploads/bdeb2840ffcc01384f79787b8ab113e3.mp4"
                            poster="https://stormsend1.djicdn.com/stormsend/uploads/dea08c26be64fd58d54c71c647206001.jpg"></video>
                    </div> -->

                </div>

                <ul class="content_bottom_bottom clearFix">
                    <!-- <li>
                        <a href="#">
                            <div class="content_bottom_bottom_top">
                                <img src="https://product2.djicdn.com/uploads/spu/cover/ebb908b85f9f48dbabf5e58a79a74016@retina_small.png" alt="">
                                <div class="content_bottom_bottom_top_hover">
                                   <img src="https://product1.djicdn.com/uploads/spu/hover/62d6e76f88c7d8c4f0904b920d428465@origin.jpg" alt=""> 
                                   <p>
                                    御 Mini 将强大飞行性能注入轻小机身中，可随时伴你出行，配合全新 DJI Fly app，助你畅快飞行，随心创作。
                                   </p>
                                </div>
                            </div>
                            <div class="content_bottom_bottom_bottom">
                                <p>
                                    御 Mavic Mini
                                </p>
                                <p>
                                    ¥2699
                                </p>
                            </div>
                        </a>
                    </li> -->
                    
                    
                </ul>

            </div>

        </div>

    </div>

    <!-- 页脚区域 -->
    <div class="footer">
        <div class="footer_wrap w">

            <div class="footer_wrap_top">
                <div class="footer_wrap_top_item">
                    <img src="./imgs/truck-moving.svg" alt="">
                    <p>
                        全场满 ¥99 顺丰包邮<br>
                        （顺丰无法配送的区域将使用 EMS）
                    </p>
                </div>
                <div class="footer_wrap_top_item">
                    <img src="./imgs/credit-card.svg" alt="">
                    <p>
                        支持支付宝、微信、银联、银行转账<br>
                        支持花呗、京东白条和招行分期
                    </p>
                </div>
                <div class="footer_wrap_top_item">
                    <img src="./imgs/comment-alt-smile.svg" alt="">
                    <p>
                        邮箱: <a href="#">support@dji.com</a>
                    </p>
                </div>
                <div class="footer_wrap_top_item">
                    <img src="./imgs/newGovIcon.gif" alt="">
                    <!-- <p>
                        全场满 ¥99 顺丰包邮<br>
                        （顺丰无法配送的区域将使用 EMS）
                    </p> -->
                </div>
            </div>

            <div class="footer_wrap_content clearFix">
                <div class="footer_wrap_content_top clearFix">
                    <ul>
                        <li>商城热卖</li>
                        <li><a href="#">"御" Mavic</a></li>
                        <li><a href="#">"晓" Spark</a></li>
                        <li><a href="#">精灵 Phantom</a></li>
                        <li><a href="#">灵眸 Osmo</a></li>
                        <li><a href="#">"悟" Inspire</a></li>
                        <li><a href="#">如影 Ronin</a></li>
                    </ul>
                    <ul>
                        <li>商城热卖</li>
                        <li><a href="#">"御" Mavic</a></li>
                        <li><a href="#">"晓" Spark</a></li>
                        <li><a href="#">精灵 Phantom</a></li>
                        <li><a href="#">灵眸 Osmo</a></li>
                        <li><a href="#">"悟" Inspire</a></li>
                        <li><a href="#">如影 Ronin</a></li>
                    </ul>
                    <ul>
                        <li>商城热卖</li>
                        <li><a href="#">"御" Mavic</a></li>
                        <li><a href="#">"晓" Spark</a></li>
                        <li><a href="#">精灵 Phantom</a></li>
                        <li><a href="#">灵眸 Osmo</a></li>
                        <li><a href="#">"悟" Inspire</a></li>
                        <li><a href="#">如影 Ronin</a></li>
                    </ul>
                    <ul>
                        <li>商城热卖</li>
                        <li><a href="#">"御" Mavic</a></li>
                        <li><a href="#">"晓" Spark</a></li>
                        <li><a href="#">精灵 Phantom</a></li>
                        <li><a href="#">灵眸 Osmo</a></li>
                        <li><a href="#">"悟" Inspire</a></li>
                        <li><a href="#">如影 Ronin</a></li>
                    </ul>
                    <form action="">
                        <p>订阅</p>
                        <p>第一时间了解我们的促销活动、热销产品和最新信息。</p>
                        <input type="text" placeholder="请输入您的邮箱"><button>></button>
                    </form>
                </div>
                


                <div class="footer_wrap_content_left">
                    <ul class="clearFix">
                        <li class="iconfont"><a href="#">&#xe6f7;</a></li>
                        <li><a href="#">关于我们</a></li>
                        <li><a href="#">联系我们</a></li>
                        <li><a href="#">招聘精英</a></li>
                        <li><a href="#">官方旗舰店</a></li>
                    </ul>
                </div>
                <div class="footer_wrap_content_right">
                    <ul>
                        <li><a href="#" class="iconfont">&#xe69a;</a></li>
                        <li><a href="#" class="iconfont">&#xe63e;</a></li>
                        <li><a href="#" class="iconfont">&#xe605;</a></li>
                    </ul>
                </div>
            </div>

            <div class="footer_wrap_bottom clearFix">
               <div class="footer_wrap_bottom_left clearFix">
                <span>
                    Copyright © 2021 DJI 大疆创新 版权所有
                </span>
                <ul>
                    <li>
                        <a href="#">隐私权政策<em>·</em></a>
                        
                    </li>
                    <li>
                        <a href="#">使用条款<em>·</em></a>
                        
                    </li>
                    <li>
                        <a href="#">粤ICP备12032134号-11<em>·</em></a>
                        
                    </li>
                    <li>
                        <a href="#">营业执照<em>·</em></a>
                        
                    </li>
                    <li>
                        <a href="#">网站地图</a>
                    </li>
                </ul>
               </div>
               <div class="footer_wrap_bottom_right">
                <span>网站问题反馈？</span>
                <a href="#">点击这里</a>
               </div>
            </div>

        </div>
    </div>

    <!-- 引入工具包 -->
    <script src="./js/utils.js"></script>
    <!-- 引入数据 -->
    <script src="./data/data-index.js"></script>
    <!-- 引入业务逻辑 -->
    <script src="./js/index.js"></script>

</body>

</html>